<template>
  <div class="wallet-box">
    <van-nav-bar
      title="钱包"
      left-arrow
      @click-left="onClickLeft"
      class="nav-bar"
    />
    <van-row class="wallet-top" style="height:94px;z-index:2">
      <van-col span="12">
        <div class="wallet-top-rating">
          <!-- <img class="wallet-top-img" src="../../../../static/img/game/mine.png"> -->
          <span>级别：{{ obtInfo.user_rating_txt }}</span>
        </div>
        <div class="wallet-top-btn">
          <div class="wallet-top-luck" @click="onClickWait">抽奖</div>
          <div @click="onClickWait">游戏规则</div>
        </div>
      </van-col>
      <van-col span="6">
        <span>&nbsp</span>
      </van-col>
      <van-col span="6" class="container-top">
        <img
          class="user-img"
          :src="userAvatar"
        >
      </van-col>
    </van-row>
    <div class="wallet-con">
      <div class="wallet-con-title">我的资产</div>
      <van-row class="wallet-cen" >
        <van-col span="12">
          <span @click="toMyWallet" class="wallet-cen-box first-box">
            我的钱包
          </span>
        </van-col>
        <van-col span="12">
          <span @click="toOrepull" class="wallet-cen-box second-box">
            矿池
          </span>
        </van-col>
      </van-row>

      <van-cell-group class="gap-s">
        <van-cell  title="激活" @click='toJihuo' is-link class="shadow"/>
        <van-cell  title="复利" :value="ji_status == 4 ? '' : '待激活'" @click='toFutou' is-link class="shadow" />
        <van-cell title="转账" :value="ji_status == 4 ? '' : '待激活'" @click='toCarry' is-link class="shadow" />
        <van-cell title="粉丝团" is-link class="shadow" @click="toFans"/>
        <van-cell title="C2C交易" is-link class="shadow" @click="onClickWait"/>
        <van-cell title="USDT提币" :value="ji_status == 4 ? '' : '待激活'" is-link class="shadow" style="display:none"/>
        <van-cell title="区块链商城" is-link class="shadow" @click="onClickWait"/>
        <van-cell title="OBT众筹" is-link class="shadow" @click="onClickWait"/>
      </van-cell-group>
    </div>

    <van-tabbar class="new-bo-nav" style="z-index:99999;height: 62px;background: #000;">
      <van-tabbar-item>
        <router-link :to="{ path: '/game' }" exact>
          <img src="static/img/game/ball.png" class="tabbar-img">
          首页
        </router-link>
      </van-tabbar-item>

      <van-tabbar-item>
        <router-link :to="{ path: '/wallet' }">
          <img src="static/img/game/discover.png" class="tabbar-img">
          钱包
        </router-link>
      </van-tabbar-item>

      <van-tabbar-item>
        <router-link :to="{ path: '/my' }">
          <img src="static/img/game/mine-tab.png" class="tabbar-img">
          我的
        </router-link>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import { Toast } from 'vant';
  import { Dialog } from 'vant';

  export default {
    data(){
      return {
        config: {
          value: 'https://www.baidu.com',
          imagePath: './examples/assets/logo.png',
          filter: 'color'
        },
        erweimaControl:true,
        islogin:false,
        downloadButton: false,
        //  用户账l号信息
        accountList: [],
        imgsrc:"",
        userid:"",
        obtInfo:'',
        ji_status:'',
        userAvatar: '',
        nickname: '',
        lastPageUrl:""
      }
    },
    created(){

    },
    mounted(){
      this.lastPageUrl = sessionStorage.getItem("lastAndNowPage").split('-')[1];
      sessionStorage.setItem("lastAndNowPage",this.lastPageUrl+"-/wallet")
      if(!sessionStorage.getItem("usermessage")) {
        this.$router.push('/login');
      }
      token_g = JSON.parse(sessionStorage.getItem("usermessage")).token;
      this.ji_status = JSON.parse(sessionStorage.getItem("ji_status"));
      this.getHeaderInfo();

      var userMessage = JSON.parse(sessionStorage.getItem("usermessage"));
      if(userMessage){
      	this.userid = userMessage.user.id;
        this.islogin = true;
        this.usermobile = userMessage.user.mobile;
        token_g = userMessage.token;
        this.$axios({
          method: "PATCH",
          url: url_g + "/user/",
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          if(res && res.data){
            sessionStorage.setItem("ji_status",JSON.stringify(res.data.status));
            this.ji_status = JSON.parse(sessionStorage.getItem("ji_status"));
            this.userAvatar = res.data.avatar;
            this.nickname = res.data.nick_name;
          }
        }).catch((e)=>{
              Toast(e.response.data.detail);
        })
      }
    },
    methods:{
      toFans(){
        this.$router.push('/fans')
      },
      onClickLeft() {
        this.$router.push('/game')
      },
      getHeaderInfo() {
          console.log(token_g)
          if(!token_g) {
              Dialog.alert({
                  message: '请先登录'
              }).then(() => {
                  // on close
              });
              return false
          } else {
            // 头部信息
            this.$axios({
                method: 'GET',
                url: url_g + '/obtinfo/',
                headers: {
                  'Authorization': 'Bearer ' + token_g
                }
            }).then((res) => {
              if(res.data) {
                // this.obtInfo = res.data.data
                let data = res.data.data
                switch(data.user_rating) {
                  case '1':
                    data.user_rating_txt = '有效节点'
                    break;
                  case '2':
                    data.user_rating_txt = '重要节点'
                    break;
                  case '3':
                    data.user_rating_txt = '超级节点'
                    break;
                  case '4':
                    data.user_rating_txt = '全球节点'
                    break;
                }
                this.obtInfo = data
              }
            }).catch((e) => {
              console.error('GET err:' + e);
            });
          }
      },
      toJihuo() {
          if(this.ji_status == 4){
            sessionStorage.setItem('jihuo',true)
          }
          this.$router.push('/jihuo');
      },
      toFutou() {
           if(this.ji_status == 4){
            this.$router.push('/futou');
           }else{
             Toast("对不起，您还没有激活");
           }
      },
      toCarry(){
        if(this.ji_status == 4){
          this.$router.push('/carry');
        } else {
          Toast("对不起，您还没有激活");
        }
      },
      toC2C() {
        if(this.ji_status == 4){
          this.$router.push('/c2c');
        } else {
          Toast("对不起，您还没有激活");
        }
      },
      toMyWallet(){
        if(this.ji_status == 4){
          this.$router.push('/mywallet');
        } else {
          Toast("对不起，您还没有激活");
        }
      },
      toOrepull(){
        if(this.ji_status == 4){
          this.$router.push('/orepull');
        } else {
          Toast("对不起，您还没有激活");
        }
      },
      toLuckDraw() {
        if(this.ji_status == 4){
          this.$router.push('/luckDraw');
        } else {
          Toast("对不起，您还没有激活");
        }
      },
      onClickRules() {
        Dialog.alert({
          title: '游戏规则',
          message: '恭喜您进入OBT矿池！新激活账户立即享有一次幸运抽奖！抽奖结束后立即发放OBT，祝您喜中大奖！'
        }).then(() => {
          // on close
        });
      },
      onClickWait() {
        Toast("等待开放，敬请期待！")
      }
    }
  }
</script>

<style scoped>
.wallet-box {
  /*height: calc(100vh -46px);*/
  /*background: url('/static/img/game/game_bg.jpg') no-repeat;*/
  background: transparent;
  color: #fff;
  overflow: scroll;
  height:100vh;
}
.nav-bar {
  color: #000;
}
.shadow {
  background-color: transparent;
  color: #000;
}
.van-cell-group {
  background-color: transparent;
}
.wallet-cen-box {
  display: flex;
  width: 70%;
  height: 50px;
  line-height: 32px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 10px auto auto;
  font-size: 14px;
  padding: 10px 0 0 10px;
  color: #fff;
}
.first-box {
  background: -webkit-linear-gradient(left, #0d2199, #7775e7);
}
.second-box {
  background: -webkit-linear-gradient(left, #4c65ff, #31b5ff);
}
.wallet-top{
  display: flex;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  padding: 30px 0 45px 0;
  background: url('/static/img/game/mine-bg.jpg') no-repeat;
  background-size: cover cover;
  background-attachment: fixed;
}
.wallet-top-luck{
  width: 60px;
  height: 26px;
  border-radius: 13px;
  line-height: 26px;
  border: 1px solid #ccc;
  margin-right: 10px;
}
.wallet-top-img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 25px;
}
.wallet-top span{
  font-size: 14px;
  line-height: 40px;
  white-space: nowrap;
}
.wallet-con {
  position: relative;
  top: -15px;
  padding-top: 5px;
  background-color: #fff;
  border-radius: 15px;
  padding-bottom: 45px;
}
.wallet-con-title{
  margin: 0 0 5px 22px;
  font-size: 16px;
  line-height: 40px;
  font-weight: bold;
  color: #000;
}
.gap-s{
  margin-top: 20px;
}
.user-img {
  width: 50px;
  height: 50px;
  margin: 20px auto;
  border-radius: 50%;
}
.wallet-top-rating,
.wallet-top-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.wallet-top-btn {
  align-items: center;
}
.wallet-top-rating img {
  margin-right: 10px;
}
.new-bo-nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.tabbar-img {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}
</style>
